
<@override name="title">用户管理</@override>

<@override name="body">
	<div class="layui-card">
		<div class="layui-card-body search">
			<div class="layui-row">
				<form class="layui-form">
					<div class="layui-col-md2 mar-rgt">
						<select name="status" lay-filter="query-status">
							<option value="" selected>请选择</option>
							<option value="1">正常</option>
							<option value="2">锁定</option>
							<option value="3">离职</option>
						</select>
					</div>
					<div class="layui-col-md2 i-search-warp">
						<input type="text" autocomplete="off" id="searchTitle" name="search" placeholder="姓名或工号" class="layui-input">
						<i class="i-search layui-icon i-search-1" lay-submit lay-filter="user-query"></i>
					</div>
				</form>
				<div class="pull-right">
					<button class="pear-btn pear-btn-primary pear-btn-md" id="add">
						<i class="layui-icon layui-icon-add-1"></i>新增
					</button>
				</div>
			</div>
		</div>
		<table id="user-table" lay-filter="user-table"></table>
	</div>
</@override>

<@override name="script">
	<script type="text/javascript">
		layui.use(['table', 'form', 'jquery','common', 'xmSelect', 'laydate'], function() {
			let table = layui.table;
			let form = layui.form;
			let $ = layui.jquery;
			let common = layui.common;

			// 全局的查询条件
			let where = {};

			// 表格渲染
			table.render({
				elem: '#user-table',
				url: g.ctx + '/api/sys/user/list',
				page: true,
				limit: 10,
				cols: [[
					{
						type: 'checkbox'
					},
					{
						title: '姓名', field: 'name', align: 'center', width: 100
					},
					{
						title: '手机号', field: 'mobile', align: 'center', width: 150
					},
					{
						title: '工号', field: 'username', align: 'center', width: 120
					},
					{
						title: '所属部门', field: 'deptName', align: 'center', width: 120
					},
					{
						title: '管理部门', field: 'manageDeptName', align: 'center', width: 180
					},
					{
						title: '监管部门', field: 'partDeptName', align: 'center', width: 180
					},
					{
						title: '角色', field: 'roleName', align: 'center', width: 180
					},
					{
						title: '最后登录时间', field: 'lastLogin', align: 'center', width: 120
					},
					{
						title: '最后登录IP', field: 'lastIp', align: 'center', width: 150
					},
					{
						title: '入职时间', field: 'entryTime', align: 'center', width: 120, sort: true,
					},
					{
						title: '离职时间', field: 'dimissionTime', align: 'center', width: 120
					},
					{
						title: '用户状态', field: 'status', align: 'center', width: 120,
						templet: function (d) {
							switch (Number(d.status)) {
								case 1:
									return '正常';
								case 2:
									return '锁定';
								case 3:
									return '离职';
								default:
									return '';
							}
						}
					},
					{
						title: '操作', toolbar: LAYUI_TEMPLET.getTableHandleHtml(['edit', 'remove']), align: 'center', width: 180, fixed: 'right'
					}
				]],
				skin: 'line',
				autoSort: false, // 启动服务器端排序
				toolbar: "",
				defaultToolbar: []
			});

			// 行内元素事件
			table.on('tool(user-table)', function(obj) {
				if (obj.event === 'remove') {
					window.remove(obj);
				} else if (obj.event === 'edit') {
					window.edit(obj);
				} else if (obj.event === 'show') {
					window.show(obj);
				}
			});

			// 默认查询
			form.on('submit(user-query)', function(obj) {
				$.extend(where, obj.field);

				table.reload('user-table', {
					where: where,
					page: {
						curr: 1
					}
				}, true);
				return false;
			});

			// 用户状态查询
			form.on('select(query-status)', function(obj) {
				$('*[lay-filter="user-query"]').trigger('click');
			});

			// 默认排序
			table.on('sort(user-table)', function(obj) {
				$.extend(where, {field: obj.field, order: obj.type});

				//尽管我们的 table 自带排序功能，但并没有请求服务端。
				//有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
				table.reload('user-table', {
					initSort: obj, //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
					// where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
					// 	field: obj.field, //排序字段   在接口作为参数字段  field order
					// 	order: obj.type //排序方式   在接口作为参数字段  field order
					// },
					where: where,
					page: {
						curr: 1
					}
				}, true);
			});

			// 增加用户
			$("#add").on("click", function () {
				openDialog();
			});

			// 修改用户
			window.edit = function(obj) {
				// 当前选择行数据
				let row = obj.data;
				ajax({
					url: g.ctx + '/api/sys/user/get/' + row.id,
					type: 'get',
					success: function (resp) {
						openDialog(resp.data);
					}
				})
			};

			window.openDialog = function(data){
				let title = "编辑";
				if(data === undefined){
					title = "新增";
					data = {};
				}

				layer.open({
					type: 1,
					title: title,
					shade: 0.1,
					maxmin: true,
					area: [common.isModile()?'100%':'85%', common.isModile()?'100%':'70%'],
					btn: ['确定','取消'],
					content:  LAYUI_TEMPLET.formHtmlGen([
						{type: 'hidden', name: 'id', value: data.id},
						{type: 'text', label: '姓名', name: 'name', value: data.name, verify: "required"},
						{type: 'text', label: '手机号码', name: 'mobile', value: data.mobile, verify: "required|phone"},
						{type: 'text', label: '工号', name: 'username', value: data.username, verify: "required", readonly: data.username !== undefined},
						{type: 'multipleSelect', label: '用户角色', name: 'role', verify: "",
							url: g.ctx + '/api/sys/role/list', echo: g.ctx + '/api/sys/role/get', value: data.role},
						{type: 'singleSelect', label: '所属部门', name: 'dept', verify: "",
							url: g.ctx + '/api/sys/dept/list', echo: g.ctx + '/api/sys/dept/get', value: data.dept},
						{type: 'multipleSelect', label: '管理部门', name: 'manageDept', verify: "",
							url: g.ctx + '/api/sys/dept/list', echo: g.ctx + '/api/sys/dept/get', value: data.manageDept},
						{type: 'multipleSelect', label: '监管部门', name: 'partDept', verify: "",
							url: g.ctx + '/api/sys/dept/list', echo: g.ctx + '/api/sys/dept/get', value: data.partDept},
						{type: 'defaultSelect', label: '用户状态',name: 'status', verify: "",
							options: [
								{value: '1', text: '正常', selected: data.status === undefined ? true: data.status === 1},
								{value: '2', text: '锁定', selected: data.status === 2},
								{value: '3', text: '离职', selected: data.status === 3}
							]
						},
						{type: 'datetime', label: '入职日期', name: 'entryTime', value: data.entryTime, format: "date"},
					]),
					success: function(laDom){
						// 渲染表单控件
						UTILS.formRender(laDom);
					},
					yes: function (index, laDom) {
						// 提交表单验证
						UTILS.formSubmit("#layuiForm");
					}
				});
			};

			// 提交表单
			form.on('submit(layui-form)', function(data){
				// 判断是更新还是新增
				let url = "";
				if (data.field.id){
					url = g.ctx + '/api/sys/user/update';
				} else{
					url = g.ctx + '/api/sys/user/add';
				}

				// 属性值封装
				let params = UTILS.processFormParams("#layuiForm");
				layer.load();
				ajax({
					url: url,
					type: 'post',
					data: params,
					success: function (resp) {
						layer.closeAll();
						layer.msg(resp.msg, {icon: 1});
						table.reload('user-table');
					}
				});
				return false;
			});

			// 删除用户
			window.remove = function(obj) {
				// 当前选择行数据
				let row = obj.data;

				layer.confirm('确定要删除该用户', {
					icon: 3,
					title: '提示'
				}, function(index) {
					layer.close(index);
					let loading = layer.load();
					ajax({
						url: g.ctx + '/api/sys/user/delete',
						type: 'post',
						data: {id: row.id},
						success: function(resp) {
							layer.close(loading);
							layer.msg(resp.msg, {icon: 1});
							table.reload('user-table');
						}
					})
				});
			}

		})
	</script>
</@override>

<@extends name="/base/_base_list.ftl" />
